<template>
  <div class="topbar">
    <div class="city-entry" @click="goCity"> {{this.cityname}} <span class="iconfont icon-xiala"></span></div>
    <div class="switch-hot-default">
      <router-link to="/movie/hot" class="hot-item"> <h2>热映</h2> </router-link
      ><router-link to="/movie/cinema" class="hot-item">
        <h2>影院</h2> </router-link
      ><router-link to="/movie/wait" class="hot-item">
        <h2>待映</h2> </router-link
      ><router-link to="/movie/classics" class="hot-item">
        <h2>经典电影</h2>
      </router-link>
    </div>
    <a href="javascrip:;" class="search"
      ><span class="iconfont icon-sousuo"></span
    ></a>
  </div>
</template>

<script>
export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "Topbar",
  data(){
    return{
      cityId:'',
      reqId:'',
      cityname:'深圳',
      flag:true
    }
  },
  methods:{
     goCity() {
      this.$router.push("/citylist");
    },
  },
  mounted(){
    this.cityname = this.$route.params.cityname
    this.flag = this.$route.params.flag
    // console.log(this.cityname!==''?this.cityname:this.name)
    // console.log(this.cityname)
    console.log(this.cityname=='')
  }
};
</script>

<style lang="less">
.topbar {
  display: flex;
  width: 100%;
  height: 44px;
  background: #fff;
  justify-content: space-between;
  border-bottom: 3px solid #f5f5f5;

  .city-entry {
    padding-left: 0.4267rem;
    font-size: 0.4267rem;
    color: #666;
    display: flex;
    align-items: center;
  }

  .switch-hot-default {
    display: flex;
    width: 6.4rem;
    height: 1.2267rem;
    line-height: 1.2267rem;
    position: relative;
    justify-content: space-around;

    a {
      font-size: 0.4267rem;
      height: 1.1733rem;
      color: #666;
      font-weight: 700;
      text-align: center;
      margin: 0 1.33333333vw;
      text-decoration: none;
      &.router-link-exact-active {
        h2 {
          color: #333;
          font-size: 0.48rem;
          padding-bottom: 4px;
          border-bottom: 2px solid red;
        }
      }
      h2 {
        display: inline;
        font-size: 0.4267rem;
        font-weight: 700;
      }
    }
  }

  .search {
    width: 0.56rem;
    height: 0.56rem;
    padding: 0.2667rem 0.4rem 0.2667rem 0.2667rem;

    .icon-sousuo {
      font-size: 0.5333rem;
      color: #ef443a;
      font-weight: 700;
    }
  }
}
</style>